<template>
	<div class="index">
		<div class="w1" :style="{opacity: CreateacollState === true || CreateacollectionState === true ? 0.3 : 1}">
			
			<div class="til">
				<div class="title1">
					<h3>发布图片</h3>
					<div class="title2" @click="CreateacollState = true">
						<img src="../assets/img/草稿箱.png" style="width:25px;height:25px" alt="">
						<span>草稿箱</span>
					</div>
				</div>
			</div>
			<div class="til2">
				<div class="in1">
					<div class="jk1">
						<span>标题：</span>
						<div class="put1">
							<!-- <input type="text" v-model="titleValue" placeholder="标题(必填)">
							<span>{{titleValueLength}}/30</span> -->
							<el-input
							class="input"
							type="text"
							placeholder="标题(必填)"
							v-model="titleValue"
							maxlength="30"
							show-word-limit
							>
							</el-input>
						</div>
					</div>
					<div class="jk2">
						<span>内容：</span>
						<div class="put2">
							<div id="div1"></div>
						</div>
					</div>
					<div class="jk2_1">
						<span>上传图片：</span>
						<div class="put2_1">
							<el-upload action="#" list-type="picture-card" :auto-upload="false">
								<i slot="default" class="el-icon-plus"></i>
								<div slot="file" slot-scope="{file}">
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
											<i class="el-icon-zoom-in"></i>
										</span>
										<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
											<i class="el-icon-download"></i>
										</span>
										<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
											<i class="el-icon-delete"></i>
										</span>
									</span>
								</div>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="">
							</el-dialog>
						</div>
					</div>
					<div class="jk3">
						<span>发布板块：</span>
						<div class="put3" v-for="it in plate" :key="it">
							<input @click="plateHndle(it)" type="radio" name="value" :value=it>{{it}}
							<!-- <input type="radio" name="value" value="2">攻略
							<input type="radio" name="value" value="3">硬核 -->
						</div>
					</div>
					<div class="jk4">
						<span>选择话题：</span>
						<div class="put4">
							<!-- <block></block> -->
							<span class="ti1" v-show="dynamicTags == ''">选择相关角色、内容分类、获得更过浏览</span>
							<span class="ti1" v-show="dynamicTags != ''">
								<el-tag :key="tag" v-for="tag in dynamicTags" closable type='info' size="medium" :disable-transitions="false" @close="handleClose(tag)">
									{{tag}}
								</el-tag>
							</span>
							<div class="put4_1">
								<input type="text" placeholder="搜索话题">
							</div>
							<div class="jk4_1" v-show="plateValue === '同人图'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in PeerMap" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div>
							<div class="jk4_1" v-show="plateValue === 'cos'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in Cos" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div>
							<!-- <div class="jk4_1" v-show="plateValue === '硬核'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in Hard" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div> -->
						</div>
					</div>
					<div class="jk5">
						<span class="ti1">加入合集：</span>
						<div class="put5">
							<img class="put5_img" :src="obtainImg || 'https://bbs.mihoyo.com/_nuxt/img/noData.a3d7135.png'" alt="" v-show="formInline.region !== '不选择合集'">
							<el-select @change="obtain" v-model="formInline.region">
								<el-option label="不选择合集" value="不选择合集"></el-option>
								<el-option class="ert" :label="item.title" :value="item.title" v-for="item,i in formLsit" :key="i" style="display: flex;height:50px;align-items: center;">
									<img style="object-fit: cover;width: 40px;height: 40px;border-radius: 6px;" :src="item.img" alt="">{{item.title}}
								</el-option>
								<el-option label="不选择合集" value="不选择合集">
									<el-button size="mini" type="text" @click="CreateacollectionState = true" style="display:flex;align-items: center;cursor:pointer;">
										<div style="display:flex;align-items: center;">
											<img src="../assets/img/加号.png" style="width:20px;height:20px;margin-left:18px;" alt="">
											<span class="ti2" style="color:#ccc;font-size:10px;">创建合集</span>
										</div>
									</el-button>
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="jk6">
						<span class="ti1">我的创作：</span>
						<div class="put6">
							<el-switch
							v-model="creation"
							active-color="#13ce66"
							inactive-color="#ccc"/>
							<span>启用即表示本内容为您独立创作，严禁转载抄袭</span>
						</div>
					</div>

					<span v-show="creation === true">
						<div class="jk7">
							<span class="ti1">预投稿：</span>
							<div class="put7">
								<el-switch
								v-model="submission"
								active-color="#13ce66"
								inactive-color="#ccc"/>
								<span class="ti2">预投稿通过3篇后可免门槛申请创作者│查看<span class="ti3">《预投稿要求》</span></span>
							</div>
						</div>
						<div class="jk8">
							<span class="ti1">转载权限：</span>
							<div class="put8">
								<el-button @click="jurisdictionHndle" :type="jurisdiction ? '' : Switch">允许规范转载</el-button>
								<el-button @click="jurisdictionHndle" :type="jurisdiction ? Switch : ''">禁止转载或摘编</el-button>
								<span class="nli" v-show="jurisdiction === false">不得对作品内容进行复制和转载</span>
								<span class="nli" v-show="jurisdiction === true">可对作品内容进行复制和转载，但需注明作品作者、出处</span>
							</div>
						</div>
						<div class="jk9">
							<el-checkbox v-model="checked" />
							<span class="ti1">
								我已阅读并接受<span class="ti2">《米游社内容上传协议》</span>
							</span>
						</div>
					</span>

					<div class="button">
						<el-button type="primary" round>发布</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 创建草稿箱 -->
		<div class="index2" v-show="CreateacollState === true">
			<Drafts @closel="closell"></Drafts>
		</div>

		<!-- 创建合集框 CreateacollectionState -->
		<div class="index3" v-show="CreateacollectionState === true">
			<CreateacollectionState @closel="closell" @parameter="parameterdata"></CreateacollectionState>
		</div>

	</div>
</template>

<script>
import E from 'wangeditor'
import Drafts from './Drafts.vue'
import CreateacollectionState from './Createacollection.vue'
export default {
	components: {Drafts,CreateacollectionState},
	data() {
		return {
			formInline: {
				user: '',
				region: '不选择合集'
        	},
			formLsit: [
				{img: 'https://upload-bbs.mihoyo.com/upload/2022/03/30/5f1612a985b3c421e3298bc17618a43b.jpeg', title: '老狗'},
				{img: 'https://upload-bbs.mihoyo.com/upload/2022/05/11/75379477/c090586c67d4793391f8bb0aebcd966f_135410871315449228.png', title: '老断'}
			],
			obtainImg: '',
			titleValue: '',
			// titleValueLength: 0,
			plateValue: '',
			labelValue: '',
			dynamicTags: [],
			plate: ['同人图','cos'],
            PeerMap: ['表情包','Cosplay','同人图','草图线稿'],
            Cos: ['Cosplay','试装','试妆','场照','漫展'],
			// pub: ['每日一水','祈愿分享','游戏战绩','好友招募','冒险家·集结','问题反馈与建议','探索解谜','萌新提问'],
			// Strategy: ['萌新指南','角色攻略','探索解谜','讨伐手册','其他攻略'],
			// Hard: ['游戏心得','角色攻略','考据','深境螺旋','彩蛋集锦'],
			creation: false,
			submission: false,
			jurisdiction: false,
			centerDialogVisible: false,
			checked: false,
			Switch: 'primary',
			// this: '',
			CreateacollState: false,
			CreateacollectionState: false,

			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false
		}
	},
	watch: {
		// titleValue() {
		// 	if(this.titleValue.length <= 30) {
		// 		this.titleValueLength = this.titleValue.length
		// 	}else {
				
		// 	}
		// }
	},
	mounted(){
        this.init()
    },
    methods:{
		closell(dat) {
			this.CreateacollState = dat
			this.CreateacollectionState = dat
		},
		parameterdata(dat) {
			// console.log('参数：', dat);
			this.formLsit.push(dat)
		},
        init(){
            const editor = new E('#div1')
             // 或者 const editor = new E( document.getElementById('div1') )
            editor.create()       
        },
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		plateHndle(e) {
			this.plateValue = e
		},
		labelHndle(e) {
			if(this.dynamicTags.length >= 5) {
				this.$message({
    				message: '最多选五个哦',
					type: 'warning'
				})
			}else {
				let y = this.dynamicTags.indexOf(e)
				if(y === -1) {
					this.dynamicTags.push(e)
				}else {
					this.dynamicTags.splice(y, 1)
				}
			}
		},
		jurisdictionHndle() {
			this.jurisdiction = !this.jurisdiction
		},
		// 上传图片块
		handleRemove(file) {
        console.log(file);
    	},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleDownload(file) {
			console.log(file);
		},
		obtain(e) {
			for(let i in this.formLsit) {
				if(this.formLsit[i].title == e) {
					this.obtainImg = this.formLsit[i].img
				}
			}
		}
    }
}
</script>

<style lang="less" scoped>
	.index {
		// border: 1px solid red;
		z-index: 3;
		position: relative;
		display: flex;
		justify-content: center;
		background-color: rgb(241, 240, 240);
		.index2 {
			// z-index: 3;
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.index3 {
			// z-index: 3;
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.w1 {
			background-color: white;
			width: 50%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 20px;
			.til {
				width: 100%;
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: center;
				.title1 {
					width: 95%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title2 {
						height: 100%;
						display: flex;
						align-items: center;
						span:hover {
							color: #02a9fc;
							cursor:pointer;
						}
					}
				}
			}
			.til2 {
				width: 80%;
				.in1 {
					padding: 10px;
					.jk1 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						span {
							width: 130px;
							// border: 1px solid red;
						}
						.put1 {
							// border: 1px solid #ccc;
							width: 96%;
							height: 35px;
							display: flex;
							justify-content: space-between;
							.input {
								// width: 80%;
								// height: 90%;
								border-style:none;
								background:none;
							}
							// span {
							// 	width: 60px;
							// 	display: flex;
							// 	align-items: center;
							// 	justify-content: flex-end;
							// 	color: #ccc;
							// }
						}
					}
					.jk2 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						span {
							width: 130px;
							height: 350px;
						}
						.put2 {
							width: 96%;
							margin-top: 30px;
							// border: 1px solid red;
						}
					}
					.jk2_1 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						// margin-top: 30px;
						// border: 1px solid red;
						span {
							width: 130px;
							// border: 1px solid red;
						}
						.put2_1 {
							width: 96%;
							margin-top: 30px;
							// border: 1px solid red;
						}
					}
					.jk3 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						margin-top: 30px;
						span {
							width: 112px;
						}
						.put3 {
							// padding-left: 6px;
							width: 100px;
							// border: 1px solid red;
							input:hover {
								cursor: pointer;
							}
						}
					}
					.jk4 {
						display: flex;
						flex-wrap: nowrap;
						margin-top: 30px;
						span {
							width: 112px;
						}
						.put4 {
							.ti1 {
								width: 100%;
								color: #ccc;
								display: flex;
								flex-wrap: wrap;
								.el-tag {
									display: flex;
									align-items: center;
									justify-content: space-between;
									margin-left: 10px;
								}
							}
							.put4_1 {
								border: 1px solid #ccc;
								margin-top: 10px;
								input {
									padding: 8px;
									width: 94%;
									border-style: none;
									background: none;
								}
							}
							.jk4_1 {
								width: 100%;
								.ti2 {
									font-size: 15px;
								}
								.tilt1 {
									width: 600px;
									padding: 3px;
									display: flex;
									flex-wrap: wrap;
									.tilt{
										border: 1px solid #ccc;
										border-radius: 20px;
										margin: 6px;
										cursor: pointer;
										span {
											display: flex;
											width: 110px;
											font-size: 15px;
											justify-content: center;
											align-items: center;
											padding: 5px;
										}
									}
								}
							}
						}
					}
					.jk5 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put5 {
							display: flex;
							.put5_img {
								object-fit: cover;
								width: 40px;
								height: 40px;
								border-radius: 6px;
							}
						}
					}
					.jk6 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put6 {
							span {
								margin-left: 16px;
								color: #ccc;
							}
						}
					}
					.jk7 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put7 {
							.ti2 {
								margin-left: 16px;
								color: #ccc;
								.ti3 {
									cursor: pointer;
									color: #02a9fc;
								}
							}
						}
					}
					.jk8 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put8 {
							.nli {
								display: flex;
								flex-wrap: wrap;
								color: #ccc;
								font-size: 15px;
							}
						}
					}
					.jk9 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30px;
						.ti1 {
							margin-left: 6px;
							.ti2 {
								cursor: pointer;
								color: #02a9fc;
							}
						}
					}
					.button {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30px;
					}
				}
			}
		}
	}
</style>